<template>
  <div class="content">
    <div class="goods">
      <div class="goods_head">
        <div class="breadcrumb">
          <el-breadcrumb class="el-breadcrumb">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item>全部商品</el-breadcrumb-item>
            <el-breadcrumb-item>分类</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="nav">
          <div class="product-nav">
            <div class="title">分类</div>
            <div
              class="select"
              v-for="(item, index) in categoryList"
              :key="index"
              @click="changeTap(index)"
            >
              <div
                class="select-item"
                :class="isSeleted == index ? 'isSelect' : ''"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="goods_assembly">
        <div class="assembly">
          <GoodsItem :datalist="goodsData"></GoodsItem>
        </div>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNumber"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsItem from "../components/goods/goodsItem.vue";
export default {
  data() {
    return {
      categoryList: [
        "全部",
        "手机",
        "电视机",
        "空调",
        "洗衣机",
        "保护套",
        "保护膜",
        "充电器",
        "充电宝",
      ],
      isSeleted: 0,
      goodsData: [],
      screnWidth: document.body.clientWidth,
      total:null,
      pageNumber:null,
      pageSize:null
    };
  },
  components: {
    GoodsItem,
  },
  mounted(){
    const type = this.$route.params.type
    if(type == 'goodsItem'){
      const index = this.$route.params.index
      this.changeTap(index)
    }else{
      const index = 0
      this.changeTap(index)
    }
  },
  methods: {
    changeTap(index) {
      this.isSeleted = index;
      const goods_types = index - 1
      if(index == 0){
        this.getData(this.pageNumber,this.pageSize)
      }else {
        this.getData(this.pageNumber,this.pageSize, goods_types)
      }
    },
    async getData(pageNumber,pageSize,goods_types) {
      const res = await this.$http.get("/goods/goods",{
        params:{pageNumber,pageSize,goods_types}
      });
      if (res.status == 200) {
        this.goodsData = res.data.result.list;
        this.total = res.data.result.total
      }
    },
    // 每页显示的条数
    handleSizeChange(val){
      this.pageNumber = 1
      this.pageSize = val
      this.getData(this.pageNumber,this.pageSize)
    },
    //前往第几页
    handleCurrentChange(val){
      this.pageNumber = val
      this.getData(this.pageNumber,this.pageSize)
    }
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.goods {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.goods_head {
  width: 80%;
  height: 100px;
}
.product-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title {
  margin-right: 20px;
}
.select {
  width: 80px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e8e6e6;
  cursor: pointer;
}
.select-item:hover {
  color: rgba(14, 149, 239, 0.975);
}
.isSelect {
  color: rgba(14, 149, 239, 0.975);
}
.el-breadcrumb {
  margin-top: 8px;
  font-size: 16px;
  line-height: 30px;
}
.goods_assembly{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
}
.assembly{
  width: 80%;
  background-color: red;
}
</style>